<template>
	<view>
		<u-sticky offsetTop="0" style="top: 0;">
			<view class="top">
				<u-icon name="arrow-left" color="#fff" size="28" style="margin-right: 70rpx;" @click="onBack()"></u-icon>
				<view class="sea">
					<u-search shape="round" placeholder="请输入" v-model="keyword" placeholderColor="#ccc" :actionStyle="col" searchIconColor="#000" @search="search()" @custom="search()" style="color: #000;"></u-search>
				</view>
			</view>
		</u-sticky>
		<view style="margin-top:300rpx; font-size: 32rpx;" v-if="list.length==0">
			<image src="../../static/zanwu.png" mode="" style="width: 286rpx; height: 261rpx; margin-left: 240rpx;">
			</image>
			<u-empty text="~ 暂无数据 ~" mode=""></u-empty>
		</view>
		<view class="lb" v-for="(item,index) in list" :key="index" @click="cart(item.id)">
			<image :src="item.image" mode=""></image>
			<text style="font-size:30rpx; float: left; margin: 12rpx 4rpx;">{{item.name}}</text>
			<text style="font-size: 26rpx; float:left; color: #9B9B9B; margin: 10rpx 0rpx; letter-spacing:4rpx;">· 建立混凝土
				· 质量 · 全寿命周期</br>· 追溯体系 ·</text>
			<text
				style="font-size:24rpx; float: right; color:#9B9B9B; margin: 16rpx 30rpx; ">{{timeFormat(item.createtime*1000,'second')}}</text>

		</view>

		<!-- <view class="lb">
      <image src="../../static/guan.png" mode=""></image>
      <text style="font-size:30rpx; float: left; margin: 12rpx 4rpx;">混凝土生产全过程监控管理</text>
      <text style="font-size: 26rpx; float:left; color: #DADADA; margin: 10rpx 0rpx; letter-spacing:4rpx;">·  建立混凝土  ·  质量  ·  全寿命周期</br>·  追溯体系  ·</text>
      <text style="font-size:24rpx; float: right; color:#DADADA ; margin: 16rpx 30rpx;">2021-08-17  11:12:12</text>
    </view> -->

		<!-- <view class="lb">
      <image src="../../static/guan.png" mode=""></image>
      <text style="font-size:30rpx; float: left; margin: 12rpx 4rpx;">混凝土生产全过程监控管理</text>
      <text style="font-size: 26rpx; float:left; color: #DADADA; margin: 10rpx 0rpx;  letter-spacing:4rpx;">·  建立混凝土  ·  质量  ·  全寿命周期</br>·  追溯体系  ·</text>
      <text style="font-size:24rpx; float: right; color:#DADADA ; margin: 16rpx 30rpx;">2021-08-17  11:12:12</text>
    </view> -->

	</view>
</template>

<script>
	import {
		cpss
	} from '@/api/api.js'
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				total: '',
				list: [],
				isLoading: false,
				ss: '',
				col:{
					'color':'#fff'
				}
			}
		},
		onLoad(val) {
			//分享微信好友
			if (this.$wechat && this.$wechat.isWechat()) {
					this.$wechat.share();
			}
			console.log(val)
			this.keyword = val.keyword
			this.c_pss()
		},
		onReachBottom() {
			if (this.page * 10 >= this.total) {
				uni.showToast({
					title: '已加载全部数据',
					icon: 'none'
				})
				return
				if (this.isLoading) return
				this.page++
				this.c_pss()
			}
		},
		methods: {
			cart: function(id) {
				uni.navigateTo({
					url: "./cp_detail?id=" + id
				})
			},
			onBack(){
				console.log(1111);
				uni.navigateBack({
					delta:2
				})
			},
			search(){
				if(!this.keyword){
					uni.showToast({
						title:'搜索关键字不能为空！',
						icon:'none'
					})
					return
				}
				this.page=1
				this.list=[]
				this.c_pss()
			},
			// 请求搜索接口
			c_pss() {
				this.isLoading = true
				cpss({
					keyword: this.keyword,
					page: this.page
				}).then(res => {
					this.isLoading = false
					this.total = res.data.total
					this.list.push(...res.data.data)
				})
			},
			//转换时间戳
			timeFormat(time, type, interval) {
				let int = interval || '-'
				var skr = new Date(time)
				let y = skr.getFullYear()
				let M = skr.getMonth() + 1
				if (M < 10) {
					M = '0' + M
				}
				let d = skr.getDate()
				if (d < 10) {
					d = '0' + d
				}

				if (type == 'day' || type == '') {
					return y + int + m + int + d
				}
				if (type == 'second') {
					return y + int + M + int + d
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F2F2;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		width: 100%;margin-top: -44px;
		height: 88rpx;
		// background: linear-gradient(to right, #94B0FF, #4575FC);
		background: #4575FC;
		.sea {
			width: 100%;
			height: 68rpx;
			float: right;
			margin: 10rpx 0rpx;
		}
	}

	.lb {
		width: 686rpx;
		height: 205rpx;
		margin: 30rpx auto;
		border-radius: 10rpx 10rpx;
		background-color: #FFF;

		image {
			width: 180rpx;
			height: 180rpx;
			float: left;
			margin: 14rpx 14rpx;
		}
	}
</style>
